<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>a：{{ a }}</h4>
    <h4>b：{{ b }}</h4>
    <h4>c：{{ c }}</h4>
    <h4>d：{{ d }}</h4>
    <!-- v-bind="{x:100,y:200}"相当于 :x="100",:y="200" -->
    <Child
      :a="a"
      :b="b"
      :c="c"
      :d="d"
      v-bind="{ x: 100, y: 200 }"
      :updateA="updateA"
    />
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from "./Child.vue";
  import { ref } from "vue";

  let a = ref(1);
  let b = ref(2);
  let c = ref(3);
  let d = ref(4);

  function updateA(value: number) {
    a.value += value;
  }
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
</style>
